import { NavLink } from "react-router-dom";

const TabBar = () => {
    const active = `after:content-[''] after:w-[16px] after:h-[2px] after:absolute after:-bottom-1 after:bg-red-500`;
    return (
        <>
            <div className="fixed bottom-2.5 w-9/12 mb-2.5 left-6/12 -translate-x-1/2 h-14 flex items-center rounded-4xl bg-gray-800 text-white tab-bar">
                <NavLink replace to="/" className={({isActive}) => `relative grow flex justify-center items-center ${isActive ? active : ''}`}>
                    <span className="icon-[mdi--home]"></span>
                </NavLink>
                <NavLink replace to="/list" className={({isActive}) => `relative grow flex justify-center items-center ${isActive ? active : ''}`}>
                    <span className="icon-[mdi--view-list-outline]"></span>
                </NavLink>
                <NavLink replace to="/settings" className={({isActive}) => `relative grow flex justify-center items-center ${isActive ? active : ''}`}>
                    <span className="icon-[mdi--settings]"></span>
                </NavLink>
            </div>
        </>
    )
}

export default TabBar;